<template>
  <el-container class="order-details-container">
    <el-header class="profile-header">
      <h1 @click="goToHome" class="home">XX网购物平台</h1>
      <div class="user-info">
        <el-button type="default" @click="goToProfile" icon="el-icon-user" class="profileButton">
          个人中心
        </el-button>
        <el-button type="default" @click="goToCart" icon="el-icon-shopping-cart-full" class="cartButton">
          购物车
        </el-button>
      </div>
    </el-header>
    <el-main class="order-details-main">
      <h2>订单详情 - 订单编号: {{ orderId }}</h2>
      <el-table :data="orderDetails" style="width: 100%">
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="productImage" label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.productImage" class="product-image" alt="商品图片">
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="productPrice" label="单价"></el-table-column>
        <el-table-column prop="price" label="金额"></el-table-column>
      </el-table>
      <div class="order-details-footer">
        <p>订单金额: ¥ {{ totalAmount }}</p>
        <p>订单状态: {{ status }}</p>
        <el-button type="danger" @click="openRefundDialog">退单</el-button>
      </div>
    </el-main>
    <el-dialog title="退单理由" :visible.sync="refundDialogVisible" width="30%">
      <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入退单理由"
          v-model="refundReason">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRefund">提交</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from 'axios';
import {applyRefund, getOrderDetail, getStatus} from "@/api/orderApi";

export default {
  name: 'ShopOrderDetails',
  data() {
    return {
      orderId: this.$route.query.orderId || '',
      orderDetails: [],
      totalAmount: 0,
      status: '',
      refundDialogVisible: false,
      refundReason: ''
    };
  },
  created() {
    this.fetchOrderDetails();
  },
  methods: {
    goToProfile() {
      if (this.$route.path !== '/shopProfile') {
        this.$router.push('/shopProfile');
      }
    },
    goToCart() {
      if (this.$route.path !== '/shopCart') {
        this.$router.push('/shopCart');
      }
    },
    goToHome() {
      if (this.$route.path !== '/shop') {
        this.$router.push('/shop');
      }
    },
    fetchOrderDetails() {
      getOrderDetail(this.orderId)
          .then(response => {
            this.orderDetails = response.data;
            for (let i = 0; i < this.orderDetails.length; i++) {
              this.totalAmount += this.orderDetails[i].price;
            }
            getStatus(this.orderId).then(response => {
              this.status = response.data;
            });
          })
          .catch(error => {
            console.error('Failed to fetch order details:', error);
            this.$message.error('加载订单详情失败');
          });
    },
    openRefundDialog() {
      this.refundDialogVisible = true;
    },
    submitRefund() {
      if (!this.refundReason) {
        this.$message.error('退单理由不能为空');
        return;
      }
      const putData = {
        description: this.refundReason, // 发送退单原因
      };
      applyRefund(this.orderId, putData)
          .then(response => {
            this.$message.success('退单申请已提交');
            this.refundDialogVisible = false;
            this.refundReason = '';
          })
          .catch(error => {
            console.error('Failed to submit refund:', error);
            this.$message.error('退单申请失败');
          });
    }
  }
};
</script>

<style scoped>
.order-details-container {
  font-family: Arial, sans-serif;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: powderblue; /* 淡蓝色背景 */
}

.user-info {
  display: flex;
  align-items: center;
}

.order-details-main {
  padding: 20px 200px;
}

.product-image {
  width: 50px;
  height: auto;
}

.order-details-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-button {
  margin-right: 10px;
}

.profileButton, .cartButton {
  color: #409EFF; /* 更改文字颜色 */
}

.profileButton i, .cartButton i {
  color: #66baff; /* 图标颜色 */
}
.home {
  cursor: pointer; /* 添加手型光标 */
}
</style>